<template>
	<view class="master_info" id="master_info">
		<!-- 店铺图片 -->
		<view class="shop_avatar">
			<swiper class="swiper" :indicator-dots="indicatorDots" :autoplay="autoplay" :interval="interval" :duration="duration">
			    <swiper-item v-for="(item, index) in shopData.shopImg" :key="index">
			        <image :src="item" mode="" class="banner"></image>
			    </swiper-item>
			</swiper>
			<!-- 右下角 -->
			<view class="right_bottom">
				{{ shopData.shopImg.length }}张店铺图片
			</view>
		</view>
		
		
		
		<!-- 店铺信息 -->
		<view class="shop_info">
			<view class="shop_name">
				<!-- 名称 -->
				<view class="name">
					{{ shopData.companyname }}
				</view>
				<!-- 收藏 -->
				<view class="favictor">
					<!-- <van-button icon="star-o" type="info" size="mini" style="padding: 0 10rpx;" >收藏</van-button> -->
				</view>
				
			</view>
			
			<!-- 评分 -->
			<view class="rate" style="font-size: 26rpx;">
				<view class="star" style="color: orange;">
					<text class="iconfont icon-star" style="line-height: 30rpx;"></text>
					<text style="line-height: 30rpx;">{{ shopData.rate ? shopData : "100%" }}</text>
				</view>  
				<view class="done" style="line-height: 30rpx;margin-left: 40rpx;">
					已完成<text>{{ shopData.count ? shopData : "0" }}</text>次服务
				</view>
			</view>
			
			<!-- fanwei -->
			<view class="fanwei">
				<van-collapse :value="active" @change="collChange">
				  <van-collapse-item title="主要经营范围" name="1">
				    {{ shopData.introduce }}
				  </van-collapse-item>
				  
				</van-collapse>
			</view>
			
			<!-- 地址 -->
			<view class="address">
				<view class="add">
					<text class="iconfont icon-location"></text>{{ shopData.location }}
				</view>
				<view class="share">
					<van-button icon="like-o" open-type="share" type="info" size="mini" style="padding: 0 10rpx;" >分享</van-button>
				</view>
			</view>
			
		</view>
		<!-- 下单 -->
		<view class="itemlist">
			<van-tabs bind:click="onClick">
			  <van-tab :title="shopData.name">
				  <view class="er_box">
				  	<view class="tag"  v-for="(item, index) in shopData.erji" :key="index" @click="choseServer(item)" >{{ item.name }}</view>
					
				  </view>
			  </van-tab>
			  <!-- <van-tab title="标签 2">内容 2</van-tab> -->
			</van-tabs>
		</view>
		<!-- <view class="btn_box">
			<van-button type="primary" round @click="shopMakeOrder(shopData.id)" >定制服务</van-button>
		</view> -->
	</view>
</template>

<script>
	export default {
		data() {
			return {
				active: "",
				shopid: "",
				shopData: []
			}
		},
		onLoad( e ) {
			// console.log(e);
			this.shopid = e.shopid
			if(this.shopid) {
				this.getShopInfo()
			}
		},
		computed: {
			id() {
				return this.shopid
			},
			token() {
				return this.$store.state.token;
			}
		},
		watch: {
			id() {
				this.getShopInfo()
			},
		},
		onShow() {
			this.getShopInfo()
		},
		onShareAppMessage() {
			return {
				title: '一号加帮',
				path: `/pages/master/master?shopid=${this.shopid}`,
			}
		},
		methods: {
			// 展开折叠
			collChange( e ) {
				// console.log(e);
				this.active = e.detail
			},
			// 根据商铺id查找信息
			async getShopInfo() {
				console.log(this.shopid);
				let res =await this.$Request("POST", "/Index/companyinfor", { id: this.shopid })
				console.log(res);
				this.shopData = res.data.data[0]
				let arr  = this.shopData.interior.split(",")
				this.shopData.shopImg = arr
				// console.log(this.shopData);
			},
			// 直接对商家下单
			shopMakeOrder( id ) {
				this.$store.commit("getShopData", this.shopData)
				// uni.navigateTo({
				// 	url: `/pages/makeorder/makeorder?shopid=${id}&item=`
				// })
			},
			// 点击选择下单
			choseServer( item ) {
				if(this.token) {
						this.$store.commit("getServerName", item )
						this.$store.commit("getShopData", this.shopData)
						uni.navigateTo({
							url:`/pages/createOrder/createOrder?itemname=${item.name}&itemid=${item.id}`
						})
				} else {
					uni.showToast({
						title: "请先登录",
						icon: "loading"
					})
					setTimeout(() => {
						uni.switchTab({
							url:"/pages/my/my"
						})
					}, 1000)
				}
				
			},
		}
	}
</script>

<style scoped lang="scss">
	#master_info {
		width: 100%;
		padding: 20rpx 30rpx;
		box-sizing: border-box;
		.btn_box {
			width: 100%;
			padding: 30rpx 0;
			text-align: center;
		}
		.itemlist {
			width: 100%;
			.er_box {
				width: 100%;
				box-sizing: border-box;
				padding: 20rpx;
				display: flex;
				align-items: center;
				flex-wrap: wrap;
				.tag {
					margin: 10rpx;
					font-size: 20rpx;
					padding: 10rpx;
					border: 1px solid #007AFF;
					border-radius: 20rpx;
				}
			}
		}
		// tupian
		.shop_avatar {
			width: 100%;
			position: relative;
			left: 0;
			top: 0;
			.right_bottom {
				position: absolute;
				right: 0;
				bottom: 0;
			}
			.swiper {
				width: 100%;
				height: 750rpx;
				box-sizing: border-box;
				image.banner {
					width: 100%;
					height: 100%;
					display: block;
				}
			}
		}
		// xinxi
		.shop_info {
			width: 100%;
			box-sizing: border-box;
			opacity: hidden;
			.shop_name {
				width: 100%;
				padding: 20rpx 0;
				display: flex;
				align-items: center;
				justify-content: space-between;
				.name {
					font-size: 40rpx;
					font-weight: bold;
					color: #007AFF;
					width: 550rpx;
					overflow: hidden;
					text-overflow: ellipsis;
					white-space: nowrap;
				}
			}
		}
		// 评分
		.rate {
			width: 100%;
			display: flex;
			align-items: center;
			padding: 20rpx 0;
			.star {
				display: flex;
				align-items: center;
			}
		}
		// 地址
		.address {
			width: 100%;
			box-sizing: border-box;
			display: flex;
			align-items: center;
			justify-content: space-between;
			padding: 20rpx 0;
			.addr {
				width: 550rpx;
				font-size: 24rpx;
				overflow: hidden;
				text-overflow: ellipsis;
				white-space: nowrap;
			}
		}
	}
</style>
